import React, { useState, useEffect } from 'react';
import './index.less';
import { DatePicker, Space, message, Button } from 'antd';

import { history } from 'umi';
import axios from 'axios';
export default function Addplan() {
  const [messageApi, contextHolder] = message.useMessage();
  let [anu, setaun] = useState('');
  let [anutitle, setanutitle] = useState('');
  let [anutype, setanutype] = useState(0);
  let [anustate, setanustate] = useState(0);
  let [bianzhiren, setbianzhiren] = useState('');
  let [bianzhitime, setbianzhitime] = useState('');
  let [fuzeren, setfuzeren] = useState('');
  let [canyuren, setcanyuren] = useState('');
  let [starttime, setstarttime] = useState('');
  let [endtime, setendtime] = useState('');
  let [fenxiang, setfenxiang] = useState('');
  // 编制日期
  const bianzhi = (date, dateString) => {
    setbianzhitime(dateString);
  };
  // 开始日期
  const kaishi = (date, dateString) => {
    setstarttime(dateString);
  };
  //结束日期
  const jieshu = (date, dateString) => {
    setendtime(dateString);
  };
  const success = () => {
    messageApi.open({
      type: 'success',
      content: '添加成功',
    });
  };
  const error = () => {
    messageApi.open({
      type: 'error',
      content: '计划不能为空',
    });
  };
  let [jh, setjh] = useState(['日', '周', '月', '季', '半年', '年']);
  let [jhua, setjhua] = useState('');
  // 防抖
  function deounce(fun, time) {
    let timer;
    return function (e) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fun.apply(this, [e]);
      }, time);
    };
  }
  // 添加事件
  const addplan = async () => {
    let o = history.location.state;
    let plantype;
    if (o) {
      plantype = o.plantype;
    } else {
      plantype = 0;
    }
    let obj = {
      anu,
      anutitle,
      anutype,
      anustate,
      bianzhiren,
      bianzhitime,
      fuzeren,
      canyuren,
      starttime,
      endtime,
      fenxiang,
      plantype,
    };
    if (anutitle) {
      await axios.post('/api/mry/addplan', obj);
      success();
      history.goBack();
    } else {
      error();
    }
  };
  useEffect(() => {
    let o = history.location.state;
    if (o) {
      setjhua(jh[o.plantype]);
    }
  }, []);
  // 渲染
  return (
    <>
      {contextHolder}
      <div className="addplan">
        <div className="applysearch">
          <Button>保存</Button>
          <Button
            onClick={() => {
              deounce(addplan(), 100);
            }}
          >
            保存新增
          </Button>
          <Button>草稿箱</Button>
          <Button>导入</Button>
        </div>
        <h1 style={{ textAlign: 'center' }}>工作{jhua}计划</h1>
        <table cellpadding="1" cellspacing="1" border="1">
          <tr>
            <td>{jhua}计划主题：</td>
            <td>
              <input
                value={anutitle}
                onChange={(e) => {
                  setanutitle(e.target.value);
                }}
                type="text"
              />
            </td>
            <td>{jhua}计划编号：</td>
            <td>
              <input
                value={anu}
                onChange={(e) => {
                  setaun(e.target.value);
                }}
                type="text"
              />
            </td>
            <td>编制人员：</td>
            <td>
              <input
                value={bianzhiren}
                onChange={(e) => {
                  setbianzhiren(e.target.value);
                }}
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td>编制部门：</td>
            <td>
              <input type="text" />
            </td>
            <td>计划类型：</td>
            <td>
              <select
                value={anutype}
                onChange={(e) => {
                  setanutype(e.target.value);
                }}
              >
                <option value="0">个人计划</option>
                <option value="1">团队计划</option>
                <option value="2">部门计划</option>
                <option value="3">公司计划</option>
              </select>
            </td>
            <td>计划状态：</td>
            {/* 0未开始 1进行中 2已完成 */}
            <td>
              <select
                value={anustate}
                onChange={(e) => {
                  setanustate(e.target.value);
                }}
              >
                <option value="0">未开始</option>
                <option value="1">进行中</option>
                <option value="2">已完成</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>编制日期：</td>
            <td>
              <DatePicker onChange={bianzhi} />
            </td>
            <td>开始日期：</td>
            <td>
              <DatePicker onChange={kaishi} />
            </td>
            <td>结束日期：</td>
            <td>
              <DatePicker onChange={jieshu} />
            </td>
          </tr>
          <tr>
            <td>负责人：</td>
            <td>
              <input
                value={fuzeren}
                onChange={(e) => {
                  setfuzeren(e.target.value);
                }}
                type="text"
              />
            </td>
            <td>参与人：</td>
            <td>
              <input
                value={canyuren}
                onChange={(e) => {
                  setcanyuren(e.target.value);
                }}
                type="text"
              />
            </td>
            <td>共享给谁：</td>
            <td>
              <input
                value={fenxiang}
                onChange={(e) => {
                  setfenxiang(e.target.value);
                }}
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td>{jhua}计划内容：</td>
            <td colspan="99">
              <textarea
                style={{ width: '96%' }}
                name=""
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </td>
          </tr>
        </table>
        <table cellpadding="1" cellspacing="1" border="1" className="t">
          <tr className="trone">
            <td colspan="99">
              附件上传 <button>批量上传</button>
            </td>
          </tr>
          <tr className="trtwo">
            <td
              style={{ width: '50%', textAlign: 'left', paddingLeft: '15px' }}
            >
              文件名称
            </td>
            <td style={{ textAlign: 'center', width: '150px' }}>文件大小</td>
            <td style={{ textAlign: 'center', width: '150px' }}>上传人</td>
            <td style={{ textAlign: 'center', width: '150px' }}>上传时间</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style={{ backgroundColor: '#fff' }} colspan="99"></td>
          </tr>
        </table>
      </div>
    </>
  );
}
